<template>
	<view class="contain">
		    <view class="top-content"></view>
         <view class='topradio'>
	
		<view class="childborder">
      <u-form :model="form" ref="uForm" :error-type="errorType">
        <view class>
          <u-form-item  class="selectone" label-width="200"   style="padding:0rpx 0rpx 20rpx 0rpx;" label="远程监控账号" prop="oldpasword">
            <u-input type="text" :clearable=false style="right:32rpx;margin-right:40rpx" placeholder="请输入账号" v-model="form.oldpasword" />
          </u-form-item>
          <u-form-item  class="selectone1" label-width="200"  label="远程监控密码" prop="newpasword">
            <u-input  :type="type" :clearable=false :password-icon="passwordIcon" style="right:32rpx" placeholder="请输入密码" v-model="form.newpasword" />
          </u-form-item>
        </view>
      </u-form>
    </view>
    <view class="btnarrclass">
      <view class="clearclass clear" @click='clearclick()'>
          清除
      </view>
      <view class="clearclass sure" @click='returnHandle()'>
          确认
      </view>
      		<u-modal @confirm='clearHandle()' :show-cancel-button='true' v-model="clearshow" :content="clearcontent"></u-modal>
    	<!-- <u-button @click='returnHandle()' style="margin-top:50rpx" class="btn clearclass" type="primary" :ripple="true" ripple-bg-color="#32afff">确认修改
    	</u-button>
    	<u-button @click='submit()' style="margin-top:20rpx"  class="btn" type="primary" :ripple="true" ripple-bg-color="#32afff">取消修改
    	</u-button> -->
    
    </view>
	</view>
	</view>
</template>

<script>
import { updateUserPwd } from "@/api/index.js";

export default {
  data() {
    return {
      username:'',
      userpassword:'',
      clearcontent: "确定清除当前配置信息?",
      form: {},
      errorType: ["message"],
      passwordIcon: true,
      type: "password",
      clearshow:false,
      rules: {
        oldpasword: [
          {
            required: true,
            message: "账号不能为空",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"]
          }
        ],
        newpasword: [
          {
            required: true,
            message: "密码不能为空",

            trigger: ["change", "blur"]
          },
          {
            required: true,
            message: "新密码不能为空",

            trigger: ["change", "blur"]
          }
          // {
          //   pattern: /^(?![A-Za-z0-9]+$)(?![a-z0-9\W]+$)(?![A-Za-z\W]+$)(?![A-Z0-9\W]+$)[a-zA-Z0-9\W]{8,16}$/,
          //   transform(value) {
          //     return String(value);
          //   },
          //   message: "密码必须由大小写字母、数字、特殊符号的8-16位组成",
          //    trigger: ["change", "blur"]
          // }
        ],
        newpasword1: [
          {
            required: true,
            message: "请再次输入新密码",
            trigger: ["change", "blur"]
          },
          {
            validator: (rule, value, callback) => {
              const tf = false;
              if (this.form.newpasword == this.form.newpasword1) {
                return true;
              } else {
                return false;
              }
            },
            message: "请输入与新密码相同的密码",
            trigger: ["blur"]
          }
        ]
      }
    };
  },
  onLoad: function(val) {
    this.userId = val.userId;
    console.log(this.userId);
  },
  onShow() {
    this.form = {};

    this.username = this.userId + "helmetusername";
    this.userpassword = this.userId + "helmetpassword";
    console.log(this.username)
    console.log(uni.getStorageSync(this.username))
    if (uni.getStorageSync(this.username)) {
    console.log('mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm')

      this.form.oldpasword = uni.getStorageSync(this.username);
      this.form.newpasword = uni.getStorageSync(this.userpassword);
    }
  },
  onPullDownRefresh() {},
  methods: {
    returnHandle() {
      console.log(this.form);
      let username = this.userId + "helmetusername";
      let userpassword = this.userId + "helmetpassword";
      uni.setStorageSync(username, this.form.oldpasword);
      uni.setStorageSync(userpassword, this.form.newpasword);
      console.log(uni.getStorageSync(username));
      console.log(uni.getStorageSync(userpassword));
      uni.navigateBack({
        delta: 1
      });
      // console.log(uni.getStorageSync("helmetpassword"))
      // this.$refs.uForm.validate(valid => {
      //   if (valid) {
      //      updateUserPwd(this.form.oldpasword, this.form.newpasword).then(
      //        response => {
      //             uni.showLoading({
      //   title: "修改成功，请重新登录。"
      // });
      //   uni.reLaunch({
      //             url: "/pages/login/login"
      //           });
      //            uni.removeStorageSync("username");
      //            uni.removeStorageSync("password");
      //            uni.removeStorageSync("rember");
      //            uni.removeStorageSync("token");
      //            uni.removeStorageSync("nickName");
      //            uni.removeStorageSync("current");
      //        }
      //      )
      //   } else {
      //     console.log("验证失败");
      //   }
      // });
    },
    clearclick(){
      this.clearshow=true
    },
    clearHandle(){
      // console.log(111111111111)
      this.form.oldpasword=''
      this.form.newpasword=''
       uni.removeStorageSync(this.username);
       uni.removeStorageSync(this.userpassword);
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  }
};
</script>
<style lang="scss" scoped>
.innerContain {
  height: 100%;
  position: relative;
  background-color: white;
}
.top-content {
  height: 160rpx;
  background: linear-gradient(to left, #1040be, #026dff);
}
.topradio {
  height: calc(100% - 200rpx);
  overflow-y: auto;
  position: absolute;
  background-color: white;
  // padding: 30rpx;
  width: 100%;
  top: 50rpx;
  border-radius: 40rpx 40rpx 0 0;
  // position: absolute;
  // width: 100%;
  // top: 0rpx;
  // left: 0rpx;
  // background-color: white;
  // border-radius: 40rpx 40rpx 0 0;
}
.top {
  padding: 16rpx;
  /* box-shadow: 20px -77px 0px 19px #c6c6ca; */
  box-shadow: 4rpx 4rpx 20rpx #e5e1e1;
  margin: 24rpx;
  border-radius: 32rpx;
}
.childborder {
  padding: 34rpx 34rpx 16rpx 34rpx;
  margin: 24rpx;

  box-shadow: 0px 6px 33px #e5e1e1;
  border-radius: 32rpx;
}
.trueorfalse {
  margin-right: 20rpx;
  top: 6rpx;
}
.red1 {
  padding: 25rpx 0rpx;
}
.footer {
  background-color: transparent;
}
.btn {
  background: linear-gradient(-34deg, #1040be, #026dff);
  width: 544rpx;
  height: 91rpx;
  font-size: 36rpx;
  font-weight: 500;
  color: #ffffff;
  border-radius: 46rpx;
}
/deep/ .u-form-item--left__content__label {
  font-size: 33rpx;
}
/deep/ .u-input__input {
  // color:
}

.co {
  color: red;
}
/deep/ .u-input__input {
  text-align: right;
}
/deep/ .u-form-item__message {
  text-align: right;
  margin-right: 32rpx;
}
.borderbottom:after {
  border-bottom-width: 0px !important;
}
/deep/ .input1 > .u-input__input > .uni-input-wrapper > .uni-input-input {
  display: none !important;
  //  color:red !important
}
/deep/ .selectone:after {
  border-top-width: 0px !important;
  border-bottom-width: 0px !important;
}
.selectone1:after {
  border-top-width: 1px !important;
  border-bottom-width: 0px !important;
}
// .u-btn {
//   display: inline;
// }
.clearclass {
  width: 50%;
  height: 80rpx;
  border-radius: 30rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  text-align: center;
}
.btnarrclass {
  display: flex;
}
.clear {
  border: 1px solid blue;
  color:blue;
  margin: 0rpx 20rpx 70rpx 50rpx;
}
.sure {
  color: white;
  background: linear-gradient(-34deg, #1040be, #026dff);

  margin: 0rpx 50rpx 70rpx 20rpx;
}
</style>